<template>
  <div id="login">
    <div class="loginConbox">
      <div class="header">
        <!--<div class="logo">-->
        <!--<img src="../../assets/logo.png">-->
        <!--</div>-->
      </div>

      <div class="loginBox">
        <!-- <preview-dicom :imageId="dcmurl1"></preview-dicom> -->
        <!-- <preview-dicom :imageId=dcmurl2></preview-dicom>
          -->

        <div class="loginCon">
          <p class="title">欣享医疗影像云平台</p>

          <el-card shadow="always" class="login-module" v-if="smdl">
              <!-- <div slot="header" class="clearfix formTitlt">
                <span>密码登录</span>
                <span class="titIconbox">
                  <i class="iconfont xu-saomadenglu2 fa-lg iconcolor"></i>
                  <i
                    class="iconfont xu-saomadenglu01 el-icon--right fa-lg pointer"
                    @click="smdl = !smdl"
                  ></i>
                </span>
              </div> -->
            <el-form
              :model="loginForm"
              status-icon
              label-width="100px"
              class="demo-ruleForm"
            >
              <el-form-item>
                <el-input
                  type="text"
                  v-model="loginForm.username"
                  auto-complete="off"
                  placeholder="请输入登录账号"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-input
                  type="password"
                  v-model="loginForm.password"
                  auto-complete="off"
                  placeholder="请输入登录密码"
                ></el-input>
              </el-form-item>
             <el-row>
                <el-col :span="9">
                  <el-input
                    v-model="loginForm.code"
                    class="input"
                    placeholder="请输入验证码"
                /></el-col>
                  <el-col :span="6" style='margin-top:12px;padding-left:20px;'>
                 <el-button type="primary" @click="getCaptchaImage()" >刷新</el-button>
                </el-col>
                <el-col :span="9">
                  <div class="reg-code">
                    <img :src="imgUrl" />
                  </div>
                </el-col>

              </el-row>

              <el-form-item>
                <el-button class="subBtn" type="primary" @click="submitForm"
                  >登录</el-button
                >
              </el-form-item>

              <p class="smalltxt">
                <!-- <router-link class="a" to="#">忘记会员名</router-link> -->
                <router-link class="a" to="/forgotPwd">忘记密码</router-link>
                <router-link class="a" to="/register">免费注册</router-link>
              </p>
            </el-form>
          </el-card>

          <el-card shadow="always" class="login-module" v-else>
            <div slot="header" class="clearfix formTitlt">
              <span>扫码登录</span>
              <span class="titIconbox">
                <i class="iconfont xu-mimadenglu1 fa-lg iconcolor"></i>
                <i
                  class="iconfont xu-imagevector el-icon--right fa-lg pointer"
                  @click="smdl = !smdl"
                ></i>
              </span>
            </div>
            <div class="ewmbox">
              <div class="ewm">
                <img
                  src="https://img.alicdn.com/tfscom/TB1ivYYyHvpK1RjSZFqwu3XUVXa.png"
                />
              </div>
              <div class="ewmicon">
                <i class="iconfont xu-saomadenglu fa-2x iconcolor"></i>
                <p>打开 微信 扫一扫登录</p>
              </div>
              <p class="smalltxt">
                <router-link class="a" to="/forgotPwd">忘记密码</router-link>
                <router-link class="a" to="/register">免费注册</router-link>
              </p>
            </div>
          </el-card>
        </div>
      </div>
    </div>
      <div class="Copyright">
    <p>Copyright © 2020 欣享医疗影像云</p>
  </div>
  </div>
</template>
<script>
import showDicom from "../../components/showDicom/showDicom_New"
import md5 from "js-md5"

export default {
  components: {
    showDicom
  },
  data () {
    return {
      dcmurl1: "/api/1_0.dcm",
      imgUrl: "",
      uuid: "",
      smdl: true,
      loginForm: {
        username: "admin",
        password: "123456",
        code: ""
      }
    }
  },
  methods: {
    submitForm () {
      const { username, password, code } = this.loginForm

      if (!username.trim() || !password.trim()) {
        this.$message({
          showClose: true,
          message: "账号或密码不能为空",
          type: "error"
        })
        return false
      }
      if (!code.trim()) {
        this.$message.error("验证码不能为空")
        return false
      }
      console.log(md5(this.loginForm.password))
      console.log(code)
      // return
      this.$request
        .fetchLogin({
          username: this.loginForm.username,
          password: md5(this.loginForm.password),
          uuid: this.uuid,
          code:code
        })
        .then((res) => {
          const {code, token, msg} = res
          if (code === 200) {
            token && sessionStorage.setItem("token_bkv", token)
            this.$store.dispatch(
              "setToken",
              token
            )
            this.$router.push({ path: "/" })
            this.$message.success("登录成功")
            this.$request
        .getInfo().then((res)=>{
            let f=JSON.stringify(res.user)
           sessionStorage.setItem('bkv_userInfo',f)
          console.log(res)
      if(res.user.name===null){
        sessionStorage.setItem('name_','普通会员')
      }
        })
          }else {
            this.$message.error(msg)
          }
        })
        .catch((err) => {
          console.log("error", err)
           this.$message.success("登录失败" + err)
          
        })
    },
    message () {
      const h = this.$createElement
      this.$notify({
        title: "账号密码",
        message: h(
          "i",
          { style: "color: teal" },
          "账号密码可以随意填写，为了测试效果填写的账号将会被存储为临时假 token"
        ),
        duration: 6000
      })
    },
    dataURLtoFile (dataurl, filename = "file") {
      let arr = dataurl.split(",")
      let mime = arr[0].match(/:(.*?);/)[1]
      let suffix = mime.split("/")[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new File([u8arr], `${filename}.${suffix}`, {
        type: mime
      })
    },

    async getCaptchaImage () {
      const result = await this.$request.captchaImage()
      this.imgUrl = "data:image/png;base64," + result.img
      this.uuid = result.uuid
    }
  },
  created () {
    this.getCaptchaImage()
  }
}
</script>
<style lang="scss">
#login {
  width: 100%;
  height: 100%;
  background-color: #2d3a4b;
  .loginConbox {
    background: #2d3a4b;
  }
  .header {
    height: 60px;
    position: relative;
    background: #2d3a4b;
    /*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
    .logo {
      margin-left: 30px;
      width: 500px;
      float: left;
      height: 40px;
      padding-top: 10px;
      img {
        height: 100%;
      }
    }
  }

  .loginBox {
    .iconcolor {
      color: #409eff;
    }

    padding: 10px 0 118px;

    .loginCon {
      width: 990px;
      margin: auto;
      position: relative;
      height: 388px;

      .el-card__header {
        border-bottom: 0px;
      }
      .title {
        font-size: 36px;
        font-weight: 600;
        color: #ffffff;
        width: 500px;
        float: left;
        margin-top: 0px;
        &:first-child {
          font-size: 34px;
          margin-top: 50px;
          margin-bottom: 30px;
          position:absolute;
          right:15%;
        }
      }
      .login-module {
        // width: 380px;
        margin-top: 125px;
        border: none;
        position: absolute;
        right: 24%;

        .formTitlt {
          font-size: 18px;
          font-weight: 400;

          .titIconbox {
            float: right;

            .pointer {
              cursor: pointer;
            }
          }
        }

        .smalltxt {
          text-align: right;

          .a {
            text-decoration: none;
            color: #999999;
            font-size: 12px;
            margin-left: 8px;
          }
        }

        .input {
          margin: 12px 0;
        }
      }

      .el-form-item__content {
        margin-left: 0px !important;

        .subBtn {
          width: 100%;
        }
      }
    }

    .el-input__inner,
    .el-button,
    .el-card,
    .el-message {
      border-radius: 0px !important;
    }

    .el-form-item__content .ico {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 999;
      width: 40px;
      height: 39px;
      text-align: center;
      border-right: 1px solid #ccc;
    }

    .ewmbox {
      width: 100%;
      height: 240px;
      margin-top: -25px;

      .ewm {
        width: 140px;
        height: 140px;
        margin: 20px auto;

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }

      .ewmicon {
        width: 140px;
        margin: 20px auto 0;

        .iconfont {
          float: left;
        }

        p {
          font-size: 12px;
          padding-left: 40px;
          margin: 0;
        }
      }
    }
  }
}
.Copyright{
  width: 250px;
  margin: 0 auto;

  bottom:30px;
}
.demo-ruleForm{
  margin-top:30px;
}
</style>
